<template>
  <el-card>
    <el-header> 省分组分项检查统计 </el-header>
    <pure-table :data="tableData" :columns="columns" stripe />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { listResultByProvinces } from "@/api/aqiMeasuredResult";

defineOptions({
  name: "ProvinceGrouping"
});

const columns: TableColumnList = [
  {
    label: "省编号",
    prop: "provinceId",
    sortable: true
  },
  {
    label: "省简称",
    prop: "provinceAbbr",
    sortable: true
  },
  {
    label: "省名称",
    prop: "provinceName"
  },
  {
    label: "SO₂超标累计",
    prop: "so2Count",
    sortable: true
  },
  {
    label: "CO超标累计",
    prop: "coCount",
    sortable: true
  },
  {
    label: "PM2.5超标累计",
    prop: "pmCount",
    sortable: true
  },
  {
    label: "AQI超标累计",
    prop: "aqiCount",
    sortable: true
  }
];

const tableData = ref([]);

const getTableData = async () => {
  const { data } = await listResultByProvinces();
  tableData.value = data;
  console.log(tableData.value, "tableData");
};

onMounted(() => {
  console.log("onMounted");
  getTableData();
});
</script>

<style>
.el-header {
  font-weight: bold;
  color: black;
  font-size: 20px;
  text-align: center;
}
</style>
